<template>

   <div>
        <el-container>
            <div>
                <NavList msg="导航菜单" @getMsg="handermsg" :isCollapse="isCollapse"></NavList>
            </div>
            <el-container>
                <el-header>
                    <i class="el-icon-d-arrow-left" @click="isCollapse=!isCollapse"></i>
                    <a href="javascript:;" style="float:right;margin:0px 30px;" @click="cancel">注销</a>
                    <span style="float:right">欢迎您:{{username}}</span>

                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
   </div>

</template>

<script>

//1、导入 需要的子组件
import NavList from '@/components/layout/NavList'


export default {
   components:{//组件与标签的映射
        NavList
   },
   data(){
       return {
          isCollapse:false,
          username:sessionStorage.getItem("username"),
       }
   },
   methods:{
       handermsg(data){
           alert(data)
       },
       cancel(){
           sessionStorage.clear()
       }
   },
   created(){

   }
}
</script>

<style>

.el-aside{
    /* height:800px; */
    background-color:khaki;
}
.el-header{
    background-color: dodgerblue;
    line-height: 60px;

}
body{
    margin:0px;
}


</style>